<template>
  <div>
    <!-- Top Bar -->
    <div class="top-bar">
      <div class="left-content">
        <span>欢迎来到中国移动!</span>
        <i class="material-icons">person</i>
        <p>{{ username }}</p>
      </div>
      <div class="right-content">
        <i class="material-icons" @click="returnCart">shopping_cart</i>
        <span @click="returnCart">购物车</span>
        <span class="cart-count">{{cartItemCount}}件</span>
        <button @click="jifen">积分商城</button>
        <a href="#">关于中国移动</a>
        <a href="#">政企客户</a>
        <a href="#" class="highlight">证照信息</a>
        <a class="highlight"  @click="magnifyAll">关怀版</a>
      </div>
    </div>

    <!-- Header -->
    <el-header class="header">
      <div class="logo">
        <img src="../assets/yd.png" alt="logo" />
      </div>
      <el-menu mode="horizontal" class="nav">
        <el-menu-item index="1" @click="returnHome">首页</el-menu-item>
        <el-menu-item index="2" @click="returnYingye">网上营业厅</el-menu-item>
        <el-menu-item index="3" @click="myMove">我的移动</el-menu-item>
        <el-menu-item index="4" @click="retrunFuwu">服务中心</el-menu-item>
      </el-menu>
      <div class="search">
        <el-input placeholder="搜索" prefix-icon="el-icon-search"></el-input>
      </div>
    </el-header>

    <!-- Content -->
    <el-main class="content">
      <router-view></router-view>
    </el-main>

    <!-- Footer -->
    <!-- Footer -->
    <el-footer class="footer" style="height: 100px;">
      <p class="copyright">
        新闻中心 | 诚聘英才 | 中移信息技术公司 | 中国移动香港公司 | 政企客户分公司 | 中国移动能力中台 | 梧桐鸿鹄 | 数字家庭合作联盟 | 网站地图 | 友情链接 |
        扫黄打非举报 | 打击传销 | 联系我们
      </p>
      <p class="copyright">Copyright©1999-2024 中国移动 版权所有 本网站支持IPv6访问</p>
      <p class="copyright">中华人民共和国增值电信业务经营许可证 经营许可证编号：A2.B1.B2-20100001</p>
    </el-footer>

    <!-- Floating Buttons -->
    <div class="floating-buttons">
      <el-button icon="el-icon-sunrise" circle></el-button>
      <el-button icon="el-icon-phone" circle></el-button>
      <el-button icon="el-icon-message" circle></el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      cartItemCount: 0,
      pollInterval: null,
      user: {},
      isMagnified: false,
    };
  },
  methods: {
    magnifyAll: function() {
      if(this.isMagnified) {
        // 如果页面已经放大，则执行恢复操作
        document.documentElement.style.fontSize = '100%';
      } else {
        // 如果页面未放大，则执行放大操作
        document.documentElement.style.fontSize = '200%';
      }
      // 更新状态
      this.isMagnified = !this.isMagnified;
    },
    fetchCartItemCount: function() {
      // 使用你的 HTTP 客户端向服务器发送请求，下面用 axios 作为示例
      this.$axios
        .get("/api/zgyd-product/getShopcartItemCount/" + this.user.id )
        .then(response => {
          this.cartItemCount = response.data.data;
        });
    },
    queryUser() {
      let param = new URLSearchParams();
      param.append("phone", this.username);
      this.$axios.post("/api/zgyd-user/queryUser", param).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data;
          this.fetchCartItemCount(); // 获取初始值
        }
      });
    },
    returnHome() {
      this.$router.push("/home");
    },
    returnYingye() {
      this.$router.push("/yingyeList");
    },
    myMove() {
      this.$router.push("/myMoveView");
    },
    returnCart() {
      this.$router.push("/cart");
    },
    jifen() {
      this.$router.push("/jiFenList");
    },
    retrunFuwu() {
      this.$router.push("/fuwuIndex");
    }
  },
  created() {
    this.username = localStorage.getItem("username");
    this.queryUser();
  },
  mounted() {
    this.pollInterval = setInterval(this.fetchCartItemCount, 10000); // 每 10 秒获取一次
  },
  beforeDestroy() {
    clearInterval(this.pollInterval); // 清除定时器
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  background-color: #f8f8f8;
  font-size: 14px;
}

.top-bar .left-content {
  display: flex;
  align-items: center;
}

.top-bar .left-content span {
  margin-right: 10px;
}

.top-bar .right-content a {
  margin-left: 10px;
  text-decoration: none;
  color: #333;
}

.top-bar .right-content a.highlight {
  color: #e91e63;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
}

.nav {
  flex-grow: 1;
  margin-left: 20px;
}

.search {
  margin-left: 20px;
}

.banner {
  width: 100%;
}

.banner img {
  width: 100%;
  height: auto;
}

.content {
  padding: 20px;
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: #f1f1f1;
}

.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-count {
  color: red;
}

.material-icons {
  fill: white;
  vertical-align: middle;
}

.copyright {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
